/* eslint-disable max-len */
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { useResize, moneyDian } from '@/utils/utils';
import {
  getRoomFlow, getRoomChart, getRoomProduct,
} from '@/services/index';
import dayjs from 'dayjs';
import Icon from '@/components/icon';
import Phone from './components/phone';
import css from './index.module.less';
import Hearder from './components/header';
import Echarts from './components/echarts';
import List from './components/list';

function DataCenter(props:any) {
  const size = useResize();
  // const [roomInfo, setRoomInfo] = useState<any>({});
  const [shopList, setShopList] = useState<any>([]);
  const [chartData, setChartData] = useState<any>([]);
  const [flow, setFlow] = useState<any>([]);
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const { match } = props;
  // 获取直播间数据
  const getFlow = () => {
    getRoomFlow({ roomId: match.params.id }).then((res) => {
      if (res.code === 'Success') {
        setFlow(res.data);
      }
    });
  };
  // 获取数据
  const getData = () => {
    Promise.all([getRoomProduct({ roomId: match.params.id }), getRoomChart({ roomId: match.params.id })]).then((res) => {
      if (res && res.length > 0) {
        // console.log('1', res);
        setShopList(res[0].data);
        setChartData(res[1].data);
      }
    }).catch((error) => {
      // console.log(error);
    });
  };
  // 获取数据
  useEffect(() => {
    getFlow();
    getData();
  }, [props]);
  // 循环拉去数据
  useEffect(() => {
    let timer:any = null;
    timer = setInterval(() => {
      getData();
    }, 60000);
    return () => {
      clearInterval(timer);
      timer = null;
    };
  }, []);

  useEffect(() => {
    let timer:any = null;
    timer = setInterval(() => {
      getFlow();
    }, 30000);
    return () => {
      clearInterval(timer);
      timer = null;
    };
  }, []);
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div className={css.data_box}>
      <div className={css.topbox}>
        <div className={css.header}>
          <div className={css.img}>
            <img src={flow?.cover} alt="" />
            <div className={css.title}>
              <h1>{flow?.title}</h1>
              {/* <h2>
                {flow?.max_online}
                在线人数
              </h2> */}
            </div>
          </div>
          <div className={css.uv}>
            <div className={css.uvb}>
              <h1>{flow?.uv}</h1>
              <h2>
                <Icon type="icon-UV1" style={{ fontSize: '24px', color: '#fff', marginRight: '4px' }} />
                uv
              </h2>
            </div>
            <div className={css.uvb}>
              <h1>{flow?.avg_time}</h1>
              <h2>
                <Icon type="icon-dangezhibiaopingjunshichang" style={{ fontSize: '24px', color: '#fff', marginRight: '4px' }} />
                平均时长
              </h2>
            </div>
          </div>
          <div className={css.money}>
            <div><Icon type="icon-qian4" /></div>
            <div>{moneyDian(flow?.gmv, 2)}</div>
          </div>
        </div>
        <div className={css.flow}>
          <div className={css.video}>
            <div className={css.zhi}>
              {
                flow?.status === 2 ? '直播中' : '已结束'
              }
            </div>
            <div className={css.time}>
              <span>
                开播：
                {dayjs(flow?.start_time).format('HH:mm:ss')}
              </span>
              {
                flow?.status !== 2 ? (
                  <span>
                    下播：
                    {dayjs(flow?.finish_time).format('HH:mm:ss')}
                  </span>
                ) : null
              }
              {
                flow?.status === 2 ? (
                  <p>
                    累计直播：
                    {dayjs(new Date().valueOf() - flow?.start_time).format('mm:ss')}
                  </p>
                ) : (
                  <p>
                    累计直播：
                    {dayjs(new Date().valueOf() - flow?.start_time).format('mm:ss')}
                  </p>
                )
              }
            </div>
            <div className={css.vi} onClick={() => showModal()}>

              <Icon type="icon-shouji" style={{ color: '#fff', fontSize: '40px' }} />

            </div>
          </div>
          <Hearder roomInfo={flow} />
        </div>
      </div>
      <div style={{ clear: 'both' }} />
      <div className={css.content}>
        <div className={css.echarts}>
          {
            size ? <Echarts data={chartData} /> : null
          }
        </div>
        <div className={css.list}>
          <List shopList={shopList} />
        </div>
      </div>
      {
        isModalVisible ? <Phone url={flow?.flv} closeF={() => handleCancel()} /> : null
      }
    </div>
  );
}
export default DataCenter;
